<!-- 标签页 -->

<template>
  <!-- prettier-ignore -->
  <q-tabs inline-label outside-arrows mobile-arrows class="tags-view bg-default" align="left" indicator-color="primary" active-class="active">
    <q-route-tab v-for="tag in tagStore.visitedViews" :key="tag.path" class="tag-item" :to="{ path: tag.path, query: tag.query }" replace>
      <template #default>
        <q-icon v-if="tag.icon" size="xs" :name="tag.icon" />
        <span class="q-mx-xs ellipsis" style="max-width: 100px">{{ tag.title }}</span>
        <q-icon v-if="!tag.affix" name="close" class="tag-close" size="1em" @click.prevent.stop="closeTag(tag)" />

        <!-- 右键菜单 -->
        <q-menu touch-position context-menu>
          <q-list bordered separator>
            <template v-for="item in contextOptions" :key="item.label">
              <q-item v-close-popup v-ripple clickable style="min-height: 36px">
                <q-item-section @click="item.action(tag)"> {{ item.label }} </q-item-section>
              </q-item>
            </template>
          </q-list>
        </q-menu>
      </template>
    </q-route-tab>
  </q-tabs>
</template>

<script lang="ts" setup>
  import { onMounted, watch, nextTick, onUnmounted } from 'vue';
  import { RouteLocationNormalized, useRoute, useRouter } from 'vue-router';

  import { TagView, useTagsViewStore } from 'src/stores';

  const tagStore = useTagsViewStore();
  const route = useRoute();
  const router = useRouter();

  // 页面加载时，初始化固定标签，并添加到访问列表中
  onMounted(() => {
    // 默认添加首页固定
    const homeMeta = { title: '首页', icon: 'mdi-home', noCache: true, affix: true };
    tagStore.addView({ path: '/', fullPath: '/', meta: homeMeta } as unknown as RouteLocationNormalized);

    // 添加当前路由
    if (route.path != '/') tagStore.addView(route);
  });
  // 退出时清空
  onUnmounted(() => tagStore.clearTagViews());

  // 路由变化时，添加到访问列表
  watch(route, () => tagStore.addView(route));

  // 关闭标签页
  const closeTag = (tag: TagView) => {
    tagStore.delView(tag);
    if (tag.path == route.path) {
      toTag(tagStore.visitedViews.splice(-1)[0]);
    }
  };

  // 右键菜单项
  const contextOptions: { label: string; action: (tag: TagView) => void }[] = [
    {
      label: '刷新页面',
      action: (tag: TagView) => {
        tagStore.delCachedView(tag);
        router.replace({ path: '/redirect' + tag.path, query: tag.query });
      },
    },

    // {
    //   label: '关闭当前',
    //   action: closeTag,
    // },

    {
      label: '关闭其它',
      action: (tag: TagView) => {
        tagStore.delOtherViews(tag);
        if (tag.path != route.path) {
          toTag(tag);
        }
      },
    },
    // {
    //   label: '关闭左侧',
    //   action: (tag: TagView) => {
    //     tagStore.delLeftViews(tag);
    //     if (tag.path !== route.path) {
    //       toTag(tag);
    //     }
    //   },
    // },

    {
      label: '关闭右侧',
      action: (tag: TagView) => {
        tagStore.delRightViews(tag);
        if (tag.path !== route.path) {
          toTag(tag);
        }
      },
    },

    {
      label: '关闭所有',
      action: () => {
        tagStore.delAllViews();
        router.push({ path: '/' });
      },
    },
  ];

  function toTag(tag: TagView) {
    if (tag.path == route.path) return;
    nextTick(() => {
      router.push({ path: tag.path, query: tag.query });
    });
  }
</script>

<style lang="scss" scoped>
  .tags-view {
    border-bottom: solid 1px $grey-4;
    .tag-item {
      min-height: 26px;
      padding: 0 5px;
      margin: 2px 4px;
      border: 1px solid $grey-4;
      max-width: 130px;

      :deep(.q-tab__content) {
        padding: 2px 0;
      }

      &.active {
        background-color: var(--q-primary);
        opacity: 0.9;
        color: white;
      }
    }
  }

  .tag-close {
    border-radius: 0.2rem;
    opacity: 0.5;
    transition: all 0.3s;
    &:hover {
      opacity: 1;
    }
  }

  .body--dark {
    .tags-view {
      border-bottom: solid 1px $grey-8;
      .tag-item {
        border: 1px solid $grey-8;
      }
    }
  }
</style>
